import React, { Component } from "react";

class Form extends Component {
  state = {
    textValue: "",
  };

  // 箭头函数解决this指向问题
  handleChange = (e) => {
    // 将输入框的值赋值给textValue
    this.setState({
      textValue: e.target.value,
    });
  };

  handleClick = () => {
    // console.log(this.state.textValue);
    // 将输入框的内容传递给父组件，加入到list里面
    if (this.state.textValue) {
      this.props.onGetData(this.state.textValue);
      this.setState({
        textValue: "",
      });
    }
  };

  render() {
    const { textValue } = this.state;
    return (
      <>
        {/* 受控组件需要加上value属性以及onChange事件 */}
        <input type="text" value={textValue} onChange={this.handleChange} />
        <button onClick={this.handleClick}>添加</button>
      </>
    );
  }
}

export default Form;
